<template>
  <div>
    <div class="text-center text-[28px] mb-4 font-bold">Sign up</div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Full name"
        :input.sync="name"
        inputType="text"
        :autoFocus="true"
        :error="errors && errors.name ? errors.name[0] : ''"
      />
    </div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Email address"
        :input.sync="email"
        inputType="email"
        :error="errors && errors.email ? errors.email[0] : ''"
      />
    </div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Password"
        :input.sync="password"
        inputType="password"
        :error="errors && errors.password ? errors.password[0] : ''"
      />
    </div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Confirm password"
        :input.sync="confirmPassword"
        inputType="password"
        :error="errors && errors.confirmPassword ? errors.confirmPassword[0] : ''"
      />
    </div>
    <div class="px-6 text-[12px] text-gray-600">Forgot password?</div>

    <div class="px-6 pb-2 mt-6">
      <button
        @click="register"
        :disabled="(!name || !email || !password || !confirmPassword)"
        :class="(!name || !email || !password || !confirmPassword) ? 'bg-gray-200' : 'bg-[#F02C56]'"
        class="w-full text-[17px] font-semibold text-white bg-[#F02C56] py-3 rounded-sm"
      >
        Sign up
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: null,
      email: null,
      password: null,
      confirmPassword: null,
      errors: null
    }
  },
  computed: {
    $userStore() {
      return this.$store.state.user
    },
    $generalStore() {
      return this.$store.state.general
    }
  },
  methods: {
    async register() {
      this.errors = null
      try {
        await this.$store.dispatch('user/getTokens')
        await this.$store.dispatch('user/register', {
          name: this.name,
          email: this.email,
          password: this.password,
          confirmPassword: this.confirmPassword
        })
        await this.$store.dispatch('user/getUser')
        await this.$store.dispatch('general/getRandomUsers', 'suggested')
        await this.$store.dispatch('general/getRandomUsers', 'following')
        this.$store.commit('general/change_isLoginOpen', false)
      } catch (error) {
        console.log(error)
        this.errors = error.response && error.response.data.errors
      }
    }
  }
}
</script>
